<template>
  <div>
    <div class="title">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="区域搜索：">
          <el-input v-model="formInline.search" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="warning" @click="add">+新建</el-button>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          width="100"
        >
          <template v-slot="{ $index }">
            <span>{{
              (regionlist.pageIndex - 1) * regionlist.pageSize + $index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="区域名称"
        />
        <el-table-column
          prop="nodeCount"
          label="点位数"
        />
        <el-table-column
          prop="remark"
          label="备注说明"
        />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="text" @click="detail(row)">查看详情</el-button>
            <el-button type="text" @click="modify(row)">修改</el-button>
            <el-button type="text" style="color:red" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="footer" style="margin-top:20px">
      <span class="footerspan">共{{ total }}条记录 第{{ regionlist.pageIndex }}/{{ regionlist.pageIndex }}页</span>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button type="primary" plain @click="beforepage">上一页</el-button>
          <el-button type="primary" plain @click="next">下一页</el-button>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="isShowdialog">
      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域名称:" prop="regionName" style="width:680px">
          <el-input v-model="ruleForm.regionName" autocomplete="off" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="备注说明:" prop="remark" style="width:680px">
          <el-input v-model="ruleForm.remark" type="textarea" rows="3" autocomplete="off" placeholder="请输入备注（不超过40字）" />
        </el-form-item>
        <el-form-item class="btn">
          <el-button @click="close">取消</el-button>
          <el-button type="warning" @click="submitForm">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 区域详情 -->
    <el-dialog :visible.sync="isShowdetail" title="区域详情" width="600px">
      <span style="margin-left:50px"> 区域名称: </span>
      <span>{{ detailname }}</span>
      <div class="footertable">
        <div class="titletable">包含点位：</div>
        <el-table
          :data="tablenum"
          style="width: 60%"
        >
          <el-table-column
            prop="date"
            label="序号"
            width="80"
            type="index"
          />
          <el-table-column
            prop="name"
            label="点位名称"
            width="200"
          />
          <el-table-column
            prop="vmCount"
            label="设备数量"
            width="120"
          />
        </el-table>
      </div>
    </el-dialog>
    <!-- 修改区域 -->
    <el-dialog :visible.sync="isShowmodify" title="修改区域" width="700px">
      <el-form ref="formregion" :model="modifyForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm" style="width:600px">
        <el-form-item label="区域名称" prop="regionName">
          <el-input v-model="modifyForm.regionName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input v-model="modifyForm.remark" type="textarea" :rows="3" autocomplete="off" />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="10">
            <el-button type="warning" plain @click="close">取消</el-button>
            <el-button type="warning" @click="confirmmodify">确认</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getregion, addregion, getregiondetail, modifyregion, delregion } from '@/api/quyu'
export default {
  data() {
    return {
      isShowdialog: false,
      isShowdetail: false,
      isShowmodify: false,
      detailname: '',
      ruleForm: {
        regionName: '',
        remark: ''
      },
      tableData: [],
      tablenum: [],
      total: '',
      formInline: {
        search: ''
      },
      regionlist: {
        pageIndex: 1,
        pageSize: 10
      },
      modifyForm: {
        regionName: '',
        remark: '',
        id: null
      },

      rules: {
        regionName: [{ required: true, message: '区域名称不能为空', trigger: 'blur' }],
        remark: [{ required: true, message: '备注说明不能为空', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.getregion()
  },
  methods: {
    async getregion() {
      const res = await getregion({ ...this.regionlist })
      console.log(res)
      this.tableData = res.currentPageRecords
      this.total = res.totalCount
    },
    onSubmit() {
      this.regionlist.name = this.formInline.search
      this.getregion()
    },
    add() {
      this.isShowdialog = true
    },
    async submitForm() {
      const res = await addregion(this.ruleForm)
      console.log(res)
      this.getregion()
      this.$message.success('新增区域成功')
      this.close()
    },
    close() {
      this.$refs.ruleForm.resetFields()
      this.isShowdialog = false
      this.isShowmodify = false
    },
    beforepage() {
      if (this.regionlist.pageIndex !== 1) {
        this.regionlist.pageIndex--
        this.getregion()
      } else {
        this.$message.warning('已经是第一页')
      }
    },
    next() {
      this.regionlist.pageIndex++
      this.getregion()
    },
    async detail(row) {
      this.isShowdetail = true
      const res = await getregiondetail({ ...this.regionlist, regionId: row.id })
      this.detailname = row.name
      console.log(res)
      this.tablenum = res.currentPageRecords
    },
    modify(row) {
      this.modifyForm.id = row.id
      this.isShowmodify = true
      this.modifyForm.remark = row.remark
      this.modifyForm.regionName = row.name
    },
    async confirmmodify(id) {
      await modifyregion(this.modifyForm)
      this.getregion()
      this.isShowmodify = false
      this.$refs.formregion.resetFields()
      this.$message.success('修改区域成功')
    },
    async del(id) {
      await delregion(id)
      this.$message.success('删除成功')
      if (this.tableData.length === 1 && this.regionlist.pageIndex > 1) {
        this.regionlist.pageIndex--
      }
      this.getregion()
    }
  }
}
</script>

<style lang='scss' scoped>
.title{
  background-color: white;
  height: 100px;
  margin-left: 20px;
  .el-input{
    width: 230px !important;
  }
}
.footerspan{
  font-size: 16px!important;
    color: #dbdfe5!important;
}
.el-button{
  margin-right: 30px;
}
.btn{
margin-left: 200px;
}
.footertable{
  display: flex;
  .titletable{
    margin-left: 50px;
    margin-top: 15px;
  }
}

</style>
